import React, {
  useState,
  useEffect,
  useCallback,
  useMemo,
  useRef,
} from 'react';

function Callback() {
  const [name, setName] = useState('Millet');

  const ref = useRef();

  useEffect(() => {
    setInterval(() => {
      setName(oldName => oldName + 'Mike');
    }, 1000);
  }, []);

  console.log('父组件执行');

  const sayHello = useCallback(() => {
    alert('我是父组件');
  }, []);

  // 同样可以用 useMemo 来缓存函数
  // const sayHello = useMemo(() => {
  //   return () => alert('我是父组件');
  // }, []);

  const xxx = useMemo(() => {
    return { a: 'XXX' };
  }, []);

  return (
    <div>
      <Children ref={ref} name={xxx} sayHello={sayHello} />
    </div>
  );
}

const Children = () => {
  console.log('子组件渲染');
  return <div>静态子组件</div>;
};

// const PureChildren = React.memo(Children);

// class Children extends React.PureComponent {
//   render() {
//     console.log('子组件执行');
//     return <div>静态子组件</div>;
//   }
// }

export default Callback;
